<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">
			form .mui-table-view-cell:after {
				height: 0;
				left: 0;
			}
			
			.mui-btn-block {
			}
			
			.mui-input-group{
				padding: 10px 0 5px;
			}
			.mui-input-group .mui-input-row{height: 50px;}
			.mui-input-row.amount label {
				width: auto;
				float: none;
				font-size: 1.3em;
				line-height: 1.8em;
				padding: 0px 10px 11px 15px;
				vertical-align: top;
			}
			
			.mui-input-row.amount label~input {
				height: 50px;
				width: 80%;
				float: none;
				padding: 0;
				margin-left: 2px;
				font-size: 1.2em;
				line-height: 1em;
				border-bottom: solid 1px #eee;
			}
			
			.mui-input-group .mui-input-row:after {
				height: 0;
			}
			
			.mui-input-row.deposit{margin-left: 35px;}
			.mui-input-row.deposit input{font-size: 1.2em;height: 50px;}
			.summary > div{padding: 5px 0;}
			.item > div{padding: 2px 0;}
			.pay{color: #999;}
			.text-pay{padding-left: 2em;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">新增还款计划</h1>
		</header>
		<div class="mui-content">
			<div class="mui-table-view mui-panel">
				<form class="mui-input-group">
					<div class="mui-input-row amount">
						<label>￥</label>
						<input type="number" id="Total" class="mui-input-clear" maxlength="30" placeholder="还款金额">
					</div>
					<div class="mui-input-row deposit">
						<input type="number" id="Amount" class="mui-input-clear" maxlength="30" placeholder="还款保证金">
					</div>
				</form>
			</div>
			<div class="mui-content-padded">
				<div class="pt-5"></div>
				<button type="button" id="submit" class="mui-btn mui-btn-danger mui-btn-block">预览计划</button>
				<h6 class="mui-content-padded pt-5 cc"><span class="mui-icon iconfont icon-tip"></span> 还款保证金设置10%以上的金额有助于循环还款计划的执行</a></h6>
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/parseTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iconfont.js"></script>
		<script type="text/javascript">
			mui.init();
			
			$id("submit").addEventListener("tap", function () {
				var total = $id("Total").value*1;
				var amount = $id("Amount").value*1;
				var cardID = app.getParam("id")*1;
				if(cardID == 0){
					mui.toast("请选择信用卡");
					return false;
				}
				if(total == 0 || amount == 0){
					mui.toast("请输入金额");
					return false;
				}
				var settings = app.getSettings();
				console.log(JSON.stringify(settings));
				if(total < settings.Repayment.MaxBillAmount){
					mui.toast('还款金额不能少于{0}元'.format(settings.Repayment.MaxBillAmount))
					return false;
				}
				if(amount < settings.Repayment.MinCashDeposit || amount/total < settings.Repayment.CashDepositRate){
					mui.toast('还款金额{0}元起不能少于{1}%'.format(settings.Repayment.MinCashDeposit, settings.Repayment.CashDepositRate*100));
					return false;
				}
				
				mui.showLoading();
				app.post("GetRepaymentPlanPreview", {CCID:cardID,BillAmount:total,Amount:amount}, function (data) {
					console.log(JSON.stringify(data));
					if(data.isSuccess){
						mui.openWindow({url:"ccard-plan-preview.html", id:"ccard-plan-preview.html", extras:data});
					}
					else{
						mui.alert(data.message);
					}
				}) 
			})
			
			init = function () {
				$id("Total").focus();
			}
			
			init();
		</script>
	</body>

</html>